<template>
  <div id="Sordinaryapply" class="same-change-oldstyle">
    <div>
      <div class="same-head-box">
        <div class="saem-seat-box">
          <div class="saem-seat-left">
            <span>当前位置：</span>
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item>员工管理</el-breadcrumb-item>
              <el-breadcrumb-item :to="{ path: '/promoterList' }">销售员管理</el-breadcrumb-item>
              <el-breadcrumb-item>{{ (pageType==1 && "添加销售") || (pageType==2 && "编辑销售") || (pageType==3 && "查看销售") }}
              </el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <div class="saem-seat-right">
            <button class="same-search-btns same-search-export" @click="RefreshFun"
              v-if="pageType==2 || pageType==3">刷新</button>
            <button class="same-search-btns" @click="returnBack">返回</button>
          </div>
        </div>
      </div>
      <div class="edit-box">
        <div class="edit-top-box">
          <img src="../../../static/images/oC-icon8.png" width="15px" /> {{pageType==1?'添加销售':'编辑销售员'}}
        </div>
        <div class="edit-body-box">

          <div class="edit-list-box">
            <div class="label-box">名称</div>
            <div class="edit-cont-box">
              <div class="edit-one">
                <el-input size="medium" type="text" name="full_name" :disabled="pageType==3" v-model="full_name"
                  placeholder="请输入销售名称" maxlength="16" />
              </div>
              <i class="i-show" v-if="pageType==1">*</i>
            </div>
          </div>

          <div class="edit-list-box">
            <div class="label-box">手机号码</div>
            <div class="edit-cont-box">
              <div class="edit-one">
                <el-input size="medium" type="tel" name="tel" maxlength="11" :disabled="pageType==3" v-model="tel"
                  placeholder="请输入手机号码" />
              </div>
              <i class="i-show" v-if="pageType==1">*</i>
            </div>
          </div>

          <div class="edit-list-box">
            <div class="label-box">账号</div>
            <div class="edit-cont-box">
              <div class="edit-one">
                <el-input size="medium" type="text" name="account" :disabled="pageType!=1" v-model="account"
                  placeholder="请输入销售账号" maxlength="32" />
              </div>
              <i class="i-show" v-if="pageType==1">*</i>
            </div>
          </div>

          <div class="edit-list-box" v-if="pageType!=3">
            <div class="label-box">密码</div>
            <div class="edit-cont-box">
              <div class="edit-one">
                <el-input size="medium" type="password" name="password15" v-model="password" placeholder="请设置登录密码" />
              </div>
              <i class="i-show" v-if="pageType==1">*</i>
            </div>
          </div>

          <div class="edit-list-box" v-if="pageType!=3">
            <div class="label-box">密码确认</div>
            <div class="edit-cont-box">
              <div class="edit-one">
                <el-input size="medium" type="password" name="repeat_password2" v-model="repeat_password"
                  placeholder="请再次输入密码" />
              </div>
              <i class="i-show" v-if="pageType==1">*</i>
            </div>
          </div>

          <div class="edit-list-box" v-if="pageType==3">
            <div class="label-box">已办理水卡数</div>
            <div class="edit-cont-box">
              <div class="edit-one">
                <el-input size="medium" name="card_number" v-model="promoterData['card_number']" disabled="disabled" />
              </div>
              <i class="i-show" v-if="pageType==1">*</i>
            </div>
          </div>

          <div class="edit-list-box" v-if="pageType==3">
            <div class="label-box">已充值水卡金额</div>
            <div class="edit-cont-box">
              <div class="edit-one">
                <el-input size="medium" name="recharge_total" v-model="promoterData['recharge_total']"
                  disabled="disabled" />
              </div>
              <i class="i-show" v-if="pageType==1">*</i>
            </div>
          </div>

          <div class="edit-list-box">
            <div class="label-box">身份证号</div>
            <div class="edit-cont-box">
              <div class="edit-one">
                <el-input size="medium" type="text" name="id_cards" maxlength="18" :disabled="pageType==3"
                  v-model="id_card" placeholder="请输入身份证号" />
              </div>
            </div>
          </div>

          <div class="edit-list-box">
            <div class="label-box">充值卡账户</div>
            <div class="edit-cont-box">
              <div class="edit-one">
                <el-input size="medium" type="number" name="recharge_account_balance" v-model="recharge_account_balance"
                  placeholder="请输入充值卡充值金额" :disabled="pageType!=1" :class="{'mr-20':(pageType==2)}" maxlength="32"
                  :style="{'margin-right:10px;width:250px':pageType==2}" />
                <el-button size="medium" v-if="pageType==2" type="primary"
                  @click="showModal">修改金额</el-button>
                <el-button size="medium" class="ml-20" v-if="pageType==3" type="primary"
                   @click="showRechargeVisible">详细</el-button>
              </div>
              <i class="i-show" v-if="pageType==1">*</i>
            </div>
          </div>

          <div class="edit-list-box" v-if="pageType!=1">
            <div class="label-box">提现账户</div>
            <div class="edit-cont-box">
              <div class="edit-one">
                <el-input size="medium" type="text" name="account_balance" disabled="disabled"
                  v-model="account_balance" />
              </div>
              <i class="i-show" v-if="pageType==1">*</i>
            </div>
          </div>

          <div class="edit-list-box">
            <div class="label-box">提成占比</div>
            <div class="edit-cont-box">
              <div class="edit-one">
                <el-input size="medium" type="number" name="commission" v-model="commission" placeholder="请输入纯数字"
                  :disabled="pageType==3">
                  <template slot="append">%</template></el-input>
              </div>
              <i class="i-show" v-if="pageType==1">*</i>
            </div>
          </div>

          <div class="edit-list-box">
            <div class="label-box">充值卡提成占比</div>
            <div class="edit-cont-box">
              <div class="edit-one">
                <el-input size="medium" type="number" name="recharge_commission" v-model="recharge_commission"
                  placeholder="请输入纯数字" :disabled="pageType==3">
                  <template slot="append">%</template></el-input>
              </div>
              <i class="i-show" v-if="pageType==1">*</i>
            </div>
          </div>

          <div class="edit-list-box" v-if="pageType!=1">
            <div class="label-box">账号状态</div>
            <div class="edit-cont-box">
              <div class="edit-one">
                <el-select size="medium" v-model="statusIndex" placeholder="请选择" :disabled="pageType==3"
                  style="width:360px">
                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </div>
              <i class="i-show" v-if="pageType==1">*</i>
            </div>
          </div>

          <div class="edit-list-box" v-if="pageType==3">
            <div class="label-box">添加时间</div>
            <div class="edit-cont-box">
              <div class="edit-one">
                <el-input size="medium" type="text" name="account_balance" disabled="disabled"
                  v-model="promoterData['add_time']" />
              </div>
              <i class="i-show" v-if="pageType==1">*</i>
            </div>
          </div>

          <div class="edit-list-box">
            <div class="label-box">居住地址</div>
            <div class="edit-cont-box">
              <div class="edit-one newshow">
                <el-select size="medium" v-model="province_id" placeholder="选择省" @change="chooseProvince"
                  style="width: 114px;" :disabled="pageType==3">
                  <el-option v-for="item in Province" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
                <el-select size="medium" v-model="city_id" placeholder="选择市" @change="chooseCity"
                  style="width: 114px;" :disabled="pageType==3">
                  <el-option v-for="item in City" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
                <el-select size="medium" v-model="area_id" placeholder="选择区县" @change="chooseArea"
                  style="width: 114px;" :disabled="pageType==3">
                  <el-option v-for="item in Area" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
              </div>
              <i class="i-show" v-if="pageType==1">*</i>
            </div>
            <el-dialog custom-class="common-custom-dialog" title="充值卡账户金额修改" :visible.sync="centerDialogVisible"
              width="500px" center>
              <div class="step-number">
                <el-input type="number" placeholder="金额为负数(-)为减少,为正数为增加" v-if="pageType!=1 && pageType !=3"
                  name="recharge_number" v-model="recharge_number" />
              </div>
              <span slot="footer" class="dialog-footer">
                <el-button @click="centerDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="changeMoney">确 定</el-button>
              </span>
            </el-dialog>
          </div>

          <div class="edit-list-box">
            <div class="label-box">详细地址</div>
            <div class="edit-cont-box">
              <div class="edit-one">
                <el-input size="medium" type="text" name="address" v-model="address" placeholder="请输入详细地址"
                  :disabled="pageType==3" />
              </div>
              <i class="i-show" v-if="pageType==1">*</i>
            </div>
          </div>

        </div>

        <el-button style="margin-left: 100px;" size="medium" type="primary" v-if="pageType!=3"
          @click="submitPromoter()">提 交</el-button>
      </div>
    </div>

    <el-dialog custom-class="common-custom-dialog" title="充值账户记录" :visible.sync="rechargeVisible">
      <el-table :data="tableData">
        <el-table-column property="date" label="时间" width="200"></el-table-column>
        <el-table-column label="类型" width="100">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.type==1" size="medium">收入</el-tag>
            <el-tag v-else-if="scope.row.type==2" type="danger" size="medium">支出</el-tag>
            <el-tag v-else size="medium" type="info">位置</el-tag>
          </template>
        </el-table-column>
        <el-table-column property="money" label="金额" width="100"></el-table-column>
        <el-table-column property="note" label="备注" width="500"></el-table-column>
      </el-table>
      <el-pagination background v-if="tableData.length>0" class="pull-right clearfix" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" :current-page.sync="pageNo" :page-sizes="pageSizesList"
        :page-size="pageSize" layout="total, prev, pager, next, jumper, sizes" :total="totalDataNumber"></el-pagination>
    </el-dialog>
  </div>
</template>

<script>
  let promoterId = "";
  export default {
    data: function () {
      return {
        rechargeVisible: false,
        pageNo: 1,
        pageSize: 10,
        pageSizesList: [10, 20, 30, 40, 50],
        tableData: [], // 返回的结果集合
        totalDataNumber: 0, // 数据的总数,-----

        centerDialogVisible: false,
        promoterData: [],
        account_balance: 0,
        statusIndex: 1,
        recharge_number: "",
        Province: [],
        City: [],
        Area: [],
        Village: [],
        province_id: "",
        city_id: "",
        area_id: "",
        full_name: "",
        account: "",
        password: "",
        repeat_password: "",
        tel: "",
        id_card: "",
        recharge_account_balance: "",
        commission: "",
        recharge_commission: "",
        address: "",
        removeShow: false,
        pageType: 1, //页面类型 2编辑 3查看  1添加
        options: [
          {
            value: 1,
            label: "正常"
          },
          {
            value: 2,
            label: "注销"
          }
        ]
      };
    },
    // 初始化运行
    created: function () {
      const { id, type } = this.$route.query;
      if (id > 0) {
        promoterId = id;
        this.pageType = type;
        this.getPromoter();
      }
      this.getProvince();
    },

    inject: ["reload"],
    methods: {
      RefreshFun() {
        // 调用reload方法，刷新整个页面
        this.reload();
      },
      //返回
      returnBack() {
        this.$router.back(-1);
      },
      getRechargeRecord(page, pageSize) {
        this.$post({
          url: "Partner/Salesman/accountRecordList",
          data: {
            salesman_id: promoterId,
            page: this.pageNo,
            row: this.pageSize,
            time_line: true,
            type: 1
          },
          success: res => {
            if (res.code == 1000) {
              const source = res.data;
              const list = [],
                origin = source.data;
              origin.forEach(element => {
                console.log(element);
                element.child.forEach(item => {
                  list.push({
                    date: element.date + " " + item.add_time,
                    ...item
                  });
                });
              });
              this.tableData = [...list];
              this.totalDataNumber = parseInt(source.page.total);
              this.pageNo = source.page.current_page;
            }
          }
        });
      },

      // 每页
      handleSizeChange(val) {
        var page = this.pageNo; // 当前页
        this.pageSize = val; // 当前每页显示条数
        this.getRechargeRecord(page, val); // 获取设备列表数据
      },
      // 分页
      handleCurrentChange(val) {
        var pageSize = this.pageSize; // 每页条数
        this.getRechargeRecord(val, pageSize); // 获取设备列表数据
      },

      showRechargeVisible() {
        this.rechargeVisible = true;
        this.pageNo = 1;
        this.getRechargeRecord();
      },

      changeMoney() {
        this.centerDialogVisible = false;
        this.$post({
          url: "Partner/Salesman/rechargeAccountBalance",
          data: { id: promoterId, number: this.recharge_number },
          success: res => {
            if (res.code == 1000) {
              this.$message.success("金额修改成功");
              this.recharge_account_balance = res.data;
              this.recharge_number = "";
            } else {
              this.$message.error(res.message);
            }
          }
        });
      },

      showModal() {
        this.centerDialogVisible = true;
      },
      //三级联动-省
      getProvince() {
        this.$post({
          url: "Common/Common/getProvince",
          data: {},
          success: data => {
            this.Province = data.data;
          }
        });
      }, //三级联动-市
      getCity(id) {
        this.$post({
          url: "Common/Common/getCity",
          data: {
            id: id
          },
          success: data => {
            this.City = data.data;
          }
        });
      }, //三级联动-区/县
      getArea(id) {
        this.$post({
          url: "Common/Common/getArea",
          data: {
            id: id
          },
          success: data => {
            this.Area = data.data;
          }
        });
      },

      chooseProvince(val) {
        this.getCity(val);
        this.city_id = "";
        this.area_id = "";
        // this.village_name = '';
      },
      chooseCity(val) {
        this.getArea(val);
        this.area_id = "";
        // this.village_name = '';
      },
      chooseArea(val) {
        // this.village_name = '';
      },

      submitPromoter() {
        if (this.pageType == 3) {
          return;
        }
        let full_name = this.full_name.trim();
        let address = this.address.trim();
        let account = this.account.trim();
        let password = this.password;
        let recharge_account_balance = this.recharge_account_balance;
        let repeat_password = this.repeat_password.trim();
        let id_card = this.id_card.trim();
        let tel = this.tel.trim();
        let commission = this.commission;
        let recharge_commission = this.recharge_commission;
        let province = this.province_id;
        let city = this.city_id;
        let area = this.area_id;
        if (full_name === "") {
          this.$message.error("请输入销售名称");
          return;
        }
        if (account === "") {
          this.$message.error("请输入销售账户");
          return;
        }
        if (this.pageType == 1) {
          if (password === "") {
            this.$message.error("请设置登录密码");
            return;
          }
          if (repeat_password === "") {
            this.$message.error("请再次输入密码");
            return;
          }
        }
        if (password !== repeat_password) {
          this.$message.error("两次密码不一致");
          return;
        }
        if (tel === "") {
          this.$message.error("请输入手机号码");
          return;
        }
        if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(tel)) {
          this.$message.error("手机号码格式错误");
          return;
        }
        // if (id_card === "") {
        //   this.$message.error("请输入身份证号");
        //   return;
        // }
        if (recharge_account_balance === "") {
          this.$message.error("请输入充值卡充值金额");
          return;
        }
        if (commission === "") {
          this.$message.error("请输入分成比例");
          return;
        }
        if (recharge_commission === "") {
          this.$message.error("请输入充值卡销售分成比例");
          return;
        }
        if (province === "") {
          this.$message.error("请选择省份");
          return;
        }
        if (city === "") {
          this.$message.error("请选择城市");
          return;
        }
        if (area === "") {
          this.$message.error("请选择区县");
          return;
        }
        if (address === "") {
          this.$message.error("请输入详细地址");
          return;
        }
        let data = {
          full_name,
          account,
          password,
          repeat_password,
          tel,
          id_card,
          recharge_account_balance,
          commission,
          recharge_commission,
          province,
          city,
          area,
          address
        };
        let url = "Partner/Salesman/addSalesman";
        if (this.pageType == 2) {
          Object.assign(data, { id: promoterId, state: this.statusIndex });
          url = "Partner/Salesman/edieSalesman";
        }
        this.$post({
          url,
          method: "POST",
          data,
          success: data => {
            if (data.code == 1000) {
              this.$message({
                type: "success",
                showClose: true,
                message: data.message,
                center: true
              });
              if (this.pageType == 1) {
                this.$router.push({ path: "/promoterList" });
              } else if (this.pageType == 2) {
                this.$router.go(-1);
              }
            } else {
              this.$message({
                type: "error",
                showClose: true,
                message: data.message,
                center: true
              });
            }
          }
        });
      },

      getPromoter() {
        this.$post({
          url: "Partner/Salesman/getSalesman",
          data: { id: promoterId },
          success: res => {
            if (res.code == 1000) {
              const source = res.data;
              this.promoterData = source;
              this.full_name = source.full_name;
              this.account = source.account;
              this.tel = source.tel;
              this.id_card = source.id_card;
              this.recharge_account_balance = source.recharge_account_balance;
              this.commission = parseFloat(source.commission) * 100;
              this.recharge_commission =
                parseFloat(source.recharge_commission) * 100;
              this.province_id = source.province;
              this.getCity(source.province);
              this.city_id = source.city;
              this.getArea(source.city);
              this.area_id = source.area;
              this.address = source.address;
              this.account_balance = source.account_balance;
              this.statusIndex = parseInt(source.state);
            } else {
              this.$message.error("获取销售信息失败");
            }
          }
        });
      }
    }
  };
</script>

<style scoped>
  #Sordinaryapply .edit-box {
    width: 100%;
    padding-bottom: 22px;
  }

  #Sordinaryapply .edit-top-box {
    width: 100%;
    padding: 28px 30px;
    box-sizing: border-box;
    font-size: 16px;
    font-weight: 500;
    color: #2D5686;
  }

  #Sordinaryapply .edit-top-box img {
    width: 15px;
    margin-right: 10px;
  }

  #Sordinaryapply .edit-body-box {
    width: 1100px;
    padding: 0px 57px 0px 27px;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
  }

  #Sordinaryapply .edit-list-box {
    width: 50%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
  }

  #Sordinaryapply .label-box {
    width: 100px;
    margin-right: 10px;
    line-height: 40px;
    font-size: 14px;
    font-weight: 400;
    color: #4C4C4C;
    text-align: right;
    flex-shrink: 0;
    /* text-align: justify;
  text-align-last:justify;
  text-justify:distribute-all-lines; */
  }

  #Sordinaryapply .edit-cont-box {
    position: relative;
    margin-bottom: 20px;
    min-width: 320px;
  }

  #Sordinaryapply .edit-cont-box .i-show {
    position: absolute;
    top: 10px;
    right: -15px;
    font-style: normal;
    color: #FF6565;
  }

  #Sordinaryapply .span-hint {
    position: absolute;
    bottom: -16px;
    left: 0px;
    font-size: 12px;
    font-weight: 400;
    color: #B3B3B3;
    width: 400px;
  }

  #Sordinaryapply .edit-one {
    min-height: 40px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }

  #Sordinaryapply .edit-comit {
    position: relative;
    min-width: 20px;
    padding: 0 8px;
  }

  #Sordinaryapply .el-select {
    margin-right: 8px !important;
  }

  #Sordinaryapply .el-input__inner {
    padding: 0px 10px !important;
  }

  .el-input--suffix .el-input__inner {
    height: 40px !important;
  }

  .ml-20 {
    margin-left: 20px;
  }

  .mr-20 {
    margin-right: 10px;
  }

  #Sordinaryapply .subbtn {
    width: 720px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background-color: #2c5586;
    border: none;
    border-radius: 5px;
    color: #fff;
    font-weight: bold;
    cursor: pointer;
    padding: 0 !important;
    margin: 20px 0;
  }
</style>
<style scoped>
  .step-number {
    width: 300px;
    margin: 0 auto;
  }
</style>
